<template>
  <div class="exchange-total">
    <!--顶部-->
    <img src="../common/images/top_logo.png" class="exchange-top">
    <!--兑换页面9000积分  页面1-->
    <div class="credit-list">
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>宝格丽香水</h3>
            <p>宝格丽晶纯女士香水40ml</p>
            <h3>FlowerPlus</h3>
            <p>悦花.简约混合包月</p>
          </div>
          <div class="list-content-bottom">
            价值¥819元【限量15份】
            <img src="../common/images/usable.png" @click="get(1)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>冰希黎BOITOWN</h3>
            <p>蜡烛+香薰+香薰补充液+沙龙</p>
            <p>香水+身体乳+沐浴露+护手霜</p>
            <h3>POPMART  盲盒*1</h3>
          </div>
          <div class="list-content-bottom">
            价值¥1283元【限量10份】
            <img src="../common/images/usable.png" @click="get(2)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>孩之宝&艺隆</h3>
            <p>巴啦啦小魔仙</p>
            <p>奥迪四驱车</p>
            <p>遥控玩具车</p>
          </div>
          <div class="list-content-bottom">
            价值¥507元【限量10份】
            <img src="../common/images/usable.png" @click="get(3)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>Jansport</h3>
            <p>Jansport</p>
            <h3>POPMART</h3>
            <p>盲盒*2</p>
          </div>
          <div class="list-content-bottom">
            价值¥477元【限量5份】
            <img src="../common/images/usable.png" @click="get(4)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>昆仑  酱油肉</p>
            <p>昆仑  无骨腊鸡腿</p>
            <p>皇上皇  如一腊肠</p>
          </div>
          <div class="list-content-bottom">
            价值¥134元【限量20份】
            <img src="../common/images/usable.png" @click="get(5)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p> 食品 小猪佩奇 超级棒棒糖+vc软糖</p>
            <p>储蓄罐+奇趣冒险蛋+牛奶曲奇</p>
            <p>饼干手提箱+超级食品礼包5件套</p>
          </div>
          <div class="list-content-bottom">
            价值¥152元【限量40份】
            <img src="../common/images/usable.png" @click="get(6)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>罗曼蒂克  干红葡萄酒</p>
            <p>小红帽  干红葡萄酒</p>
          </div>
          <div class="list-content-bottom">
            价值¥676元【限量10份】
            <img src="../common/images/usable.png" @click="get(7)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>新春零食10包套装</p>
            <p>综合坚果+肉干+小黑饼干+湾牛轧糖+陈</p>
            <p>皮糖+迷你蛋糕卷+爆米花 (焦糖味)</p>
            <p>+小林煎饼+芝麻糖+台湾</p>
          </div>
          <div class="list-content-bottom">
            价值¥131元【限量15份】
            <img src="../common/images/usable.png" @click="get(8)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>餐饮券</h3>
            <p>天泰(100元)*2 ; 左庭右院(100元)*2</p>
            <p>石窑(50元)*4 ; 金包里(100元)*2</p>
            <p>米芝莲(50元)*4</p>
          </div>
          <div class="list-content-bottom">
            价值¥1000元【限量5份】
            <img src="../common/images/usable.png" @click="get(9)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3> 餐饮券 </h3>
            <p>斯比特花园(100元)*2 ; 小自满(100元)*2</p>
            <p>贡茶(25元)*8 ; 美珍香(100元)*2</p>
            <p>天泰(100元)*2</p>
          </div>
          <div class="list-content-bottom">
            价值¥1000元【限量5份】
            <img src="../common/images/usable.png" @click="get(10)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>餐饮券 </h3>
            <p>小满(50元)*4 ; 甜之坊(50元)*4</p>
            <p>先生的花(100元)*2 ; 青花椒(100元)*2</p>
            <p>皮糖+迷你蛋糕卷+爆米花 (焦糖味)</p>
            <p>西树泡芙(50元)*4</p>
          </div>
          <div class="list-content-bottom">
            价值¥1000元【限量10份】
            <img src="../common/images/usable.png" @click="get(11)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_sliver.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>餐饮券 </h3>
            <p>天泰(100元)*2 ; 食之秘(100元)*2</p>
            <p>浩茶(25元)*8 ; 沼津港(100元)*2</p>
            <p>九丸拉面(100元)*2</p>
          </div>
          <div class="list-content-bottom">
            价值¥1000元【限量10份】
            <img src="../common/images/usable.png" @click="get(12)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <img src="../common/images/bottom.png" class="exchange-bottom">
    <!--弹窗-->
    <pop-up @cancel="cancel" :popShow="popShow" :popText="popText"></pop-up>
  </div>
</template>

<script>
  import popUp from '../components/pop-up'
  export default {
    components: {
      popUp
    },
    data() {
      return {
        popShow: false, // 弹出确认框开关
        // popText: '活动已结束 <br>感谢参与，祝您新年快乐！' // 弹出框文案
        // popText: '抱歉，您的积分余额不足！' // 弹出框文案
        popText: '确认扣除9000积分换购此福袋?' // 弹出框文案
      }
    },
    methods: {
      // 兑换积分
      get(num) {
        alert(`兑换页面9000积分${num}`)
      },
      // 取消
      cancel() {
       this.popShow = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  @import '../common/stylus/credit.styl'
</style>
